<template>
  <div class="bottom-wrapper">
    <div class="button-list">
      <div class="button-item" v-for="item in buttonList">
        <n-popselect
          v-model:value="item.value"
          :options="item.options"
          trigger="click"
          :renderLabel="item.renderLabel"
        >
          <div class="flex">
            <!-- <div class="icon"></div> -->
            <span> {{ item.name }}</span>
          </div>
        </n-popselect>
        <!-- <img :src="item.icon" alt="" /> -->
        <!-- <div class="icon"></div> -->
        <!-- <span> {{ item.name }}</span> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import u7 from "../../../assets/images/u7.png";
import u19 from "../../../assets/images/u19.png";
import u21 from "../../../assets/images/u21.png";
import u23 from "../../../assets/images/u23.png";
import basicIcon from "../../../assets/images/marker.png";
import { h, ref, watch } from "vue";
import { useMainStore } from "@/store";
import { SelectGroupOption, SelectOption } from "naive-ui";
const store = useMainStore();
const buttonList = ref([
  {
    name: "通信图层",
    icon: u7,
    options: [
      {
        label: "全部",
        value: 0,
      },
      ...store.layers.map((layer) => {
        return {
          label: layer.name,
          value: layer.id,
          icon: layer.icon || basicIcon,
        };
      }),
    ],
    renderLabel: (option: SelectOption | SelectGroupOption) => {
      console.log(option);
      return h("div", { class: ["layer-option"] }, [
        h("img", { src: option.icon }),
        h("div", {}, { default: () => option.label }),
      ]);
    },

    // options: [
    //   {
    //     label: "App",
    //     value: "App",
    //   },
    //   {
    //     label: "视频监控",
    //     value: "视频监控",
    //   },
    //   {
    //     label: "值班电话",
    //     value: "值班电话",
    //   },
    //   {
    //     label: "车辆卡口",
    //     value: "车辆卡口",
    //   },
    // ],
    value: 0,
  },
  {
    name: "数据图层",
    icon: u19,
    options: [
      {
        label: "警情",
        value: "警情",
      },
      {
        label: "标绘列表",
        value: "标绘列表",
      },
    ],
    value: "",
  },
  {
    name: "快速调度",
    icon: u21,
    options: [
      {
        label: "框选",
        value: 1,
      },
      {
        label: "圈选",
        value: 2,
        disabled: true,
      },

      {
        label: "多边形",
        value: 3,
      },
    ],
    value: "",
  },
  {
    name: "地图切换",
    icon: u23,
    options: [
      {
        label: "3d地图",
        value: "3d地图",
      },
      {
        label: "普通地图",
        value: "普通地图",
      },
    ],
    value: "",
  },
]);
watch(
  () => buttonList.value[0].value,
  (val) => {
    if (val == 0) {
      store.layers.forEach((layer) => (layer.visible = true));
    } else {
      store.layers.forEach((layer) => {
        if (layer.id == val) {
          layer.visible = true;
        } else {
          layer.visible = false;
        }
      });
    }
  }
);
watch(
  () => buttonList.value[2].value,
  (val) => {
    store.$patch({
      fillMode: val as number,
    });
    if (val != 0) {
      buttonList.value[2].value = 0;
    }
    // if (val == 0) {
    //   store.layers.forEach((layer) => (layer.visible = true));
    // } else {
    //   store.layers.forEach((layer) => {
    //     if (layer.id == val) {
    //       layer.visible = true;
    //     } else {
    //       layer.visible = false;
    //     }
    //   });
    // }
  }
);
</script>
<style>
.layer-option {
  display: flex;
  align-items: center;
  color: #fff;
}
.layer-option img {
  width: 28px;
  object-fit: contain;
  margin-right: 3px;
}
</style>
<style lang="scss" scoped>
.bottom-wrapper {
  // background-image: url("../../../assets/images/u5.png");
  // bottomOPtion
  background-image: url("../../../assets/border/01.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 1920px;
  // width: 1856px;
  height: 80px;
  // height: 76px;
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 15;

  
  display: flex;
  justify-content: center;
  align-items: center;
  // border: 1px solid red;
}
.button-list {
  margin-left: 2%;
  display: flex;
  align-items: center;
  width: 34%;
  margin-top: 20px;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
  // border: 1px solid red;
  user-select: none;
  .button-item {
    // border: 1px solid red;
    display: flex;
    align-items: center;
    margin-right: 10px;
    cursor: pointer;
    &:hover {
      color: grey;
    }
    &:active {
      color: #aaa;
    }
    font-family: PingFang SC-Medium, PingFang SC;
    color: #d2ecff;
    letter-spacing: 2px;
    .icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.3);
      margin: 0 5px;
    }
  }
  .flex {
    display: flex;
    align-items: center;
  }
}
</style>
